<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建球局页原型</title>
  <style>
    /* ===== 全局重置 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                   "PingFang SC", "Hiragino Sans GB",
                   "Microsoft YaHei", sans-serif;
      background-color: #faf9f5;
      color: #333333;
      font-size: 14px;
      line-height: 1.4;
      height: 100%;
    }

    /* ===== 页面容器 ===== */
    .container {
      max-width: 480px;
      margin: 0 auto;
      background-color: #ffffff;
      height: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding-bottom: 80px;
    }

    /* ===== 顶部导航栏 ===== */
    .topNavBar {
      background-color: #ffffff;
      border-bottom: 1px solid #e0e0e0;
      padding: 12px 16px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .navLeft {
      width: 40px;
    }

    .backButton {
      font-size: 24px;
      color: #333333;
      border: none;
      background: none;
      cursor: pointer;
      padding: 0;
    }

    .navCenter {
      flex: 1;
      text-align: center;
    }

    .pageTitle {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
    }


    /* ===== 表单内容区 ===== */
    .formContent {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
    }

    /* ===== 表单组 ===== */
    .formGroup {
      background-color: #ffffff;
      border-radius: 8px;
      margin-bottom: 16px;
    }

    /* ===== 表单项 ===== */
    .formItem {
      margin-bottom: 20px;
    }

    .formItem:last-child {
      margin-bottom: 0;
    }

    .formLabel {
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .requiredMark {
      color: #ff4444;
      font-size: 14px;
    }

    /* ===== 输入框 ===== */
    .formInput {
      width: 100%;
      height: 38px;
      background-color: #fafafa;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 0 12px;
      font-size: 14px;
      color: #333333;
      outline: none;
      transition: all 0.3s ease;
    }

    .formInput:focus {
      border-color: #333333;
      background-color: #ffffff;
    }

    .formInput::placeholder {
      color: #999999;
    }

    .formInput:disabled {
      background-color: #f5f5f5;
      color: #999999;
      cursor: not-allowed;
    }

    /* ===== 选择器 ===== */
    .formSelector {
      width: 100%;
      height: 38px;
      background-color: #fafafa;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 0 12px;
      font-size: 14px;
      color: #333333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .formSelector:hover {
      background-color: #f5f5f5;
    }

    .selectorPlaceholder {
      color: #999999;
    }

    .selectorValue {
      color: #333333;
    }

    .selectorArrow {
      font-size: 16px;
      color: #999999;
    }

    /* ===== 时间选择器组 ===== */
    .timeGroup {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .timeInput {
      flex: 1;
    }

    .timeSeparator {
      font-size: 14px;
      color: #666666;
      flex-shrink: 0;
    }

    /* ===== 底部操作区 ===== */
    .bottomActions {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #ffffff;
      border-top: 1px solid #e0e0e0;
      padding: 16px;
      z-index: 99;
      max-width: 480px;
      margin: 0 auto;
    }

    .submitButton {
      width: 100%;
      background-color: #333333;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 14px 24px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .submitButton:hover {
      background-color: #2a2a2a;
      transform: translateY(-1px);
    }

    .submitButton:active {
      transform: translateY(0);
    }

    .submitButton:disabled {
      background-color: #e0e0e0;
      color: #999999;
      cursor: not-allowed;
      transform: none;
    }

    /* ===== 辅助说明文字 ===== */
    .formHint {
      font-size: 12px;
      color: #999999;
      margin-top: 6px;
    }

    /* ===== 响应式调整 ===== */
    @media (max-width: 375px) {
      .formContent {
        padding: 12px;
      }

      .formGroup {
        padding: 12px;
      }

      .bottomActions {
        padding: 12px;
      }

      .submitButton {
        padding: 12px 20px;
        font-size: 15px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="topNavBar">
      <div class="navLeft">
        <button class="backButton">‹</button>
      </div>
      <div class="navCenter">
        <div class="pageTitle">创建球局</div>
      </div>
    </div>

    <!-- 表单内容区 -->
    <div class="formContent">
      <!-- 基础信息组 -->
      <div class="formGroup">
        <!-- 球局名称 -->
        <div class="formItem">
          <div class="formLabel">
            <span class="requiredMark">*</span>
            <span>球局名称</span>
          </div>
          <input
            type="text"
            class="formInput"
            id="gameName"
            placeholder="请输入球局名称"
            maxlength="50"
          >
          <div class="formHint">建议使用简洁明了的名称，方便其他球友识别</div>
        </div>

        <!-- 球局类型 -->
        <div class="formItem">
          <div class="formLabel">
            <span class="requiredMark">*</span>
            <span>球局类型</span>
          </div>
          <div class="formSelector" id="gameTypeSelector">
            <span class="selectorPlaceholder">请选择球局类型</span>
            <span class="selectorArrow">›</span>
          </div>
        </div>
      </div>

      <!-- 时间信息组 -->
      <div class="formGroup">
        <!-- 比赛时间 -->
        <div class="formItem">
          <div class="formLabel">
            <span class="requiredMark">*</span>
            <span>比赛时间</span>
          </div>
          <div class="timeGroup">
            <div class="timeInput">
              <div class="formSelector" id="startTimeSelector">
                <span class="selectorPlaceholder">开始时间</span>
                <span class="selectorArrow">›</span>
              </div>
            </div>
            <span class="timeSeparator">至</span>
            <div class="timeInput">
              <div class="formSelector" id="endTimeSelector">
                <span class="selectorPlaceholder">结束时间</span>
                <span class="selectorArrow">›</span>
              </div>
            </div>
          </div>
          <div class="formHint">请合理安排比赛时长，建议预留热身和结束时间</div>
        </div>
      </div>

      <!-- 场地信息组 -->
      <div class="formGroup">
        <!-- 球馆 -->
        <div class="formItem">
          <div class="formLabel">
            <span class="requiredMark">*</span>
            <span>球馆</span>
          </div>
          <div class="formSelector" id="venueSelector">
            <span class="selectorPlaceholder">请选择您的比赛球馆</span>
            <span class="selectorArrow">›</span>
          </div>
        </div>

        <!-- 场地 -->
        <div class="formItem">
          <div class="formLabel">
            <span class="requiredMark">*</span>
            <span>场地</span>
          </div>
          <div class="formSelector" id="courtSelector">
            <span class="selectorPlaceholder">请选择您的比赛场地</span>
            <span class="selectorArrow">›</span>
          </div>
          <div class="formHint">请先选择球馆后再选择场地</div>
        </div>
      </div>

    </div>

    <!-- 底部操作区 -->
    <div class="bottomActions">
      <button class="submitButton" id="submitButton">确定</button>
    </div>
  </div>

  <script>
    // 返回按钮
    const backButton = document.querySelector('.backButton');
    backButton.addEventListener('click', function() {
      alert('返回上一页');
    });

    // 球局类型选择
    const gameTypeSelector = document.getElementById('gameTypeSelector');
    gameTypeSelector.addEventListener('click', function() {
      alert('打开球局类型选择器：足球 / 篮球');
    });

    // 开始时间选择
    const startTimeSelector = document.getElementById('startTimeSelector');
    startTimeSelector.addEventListener('click', function() {
      alert('打开开始时间选择器');
    });

    // 结束时间选择
    const endTimeSelector = document.getElementById('endTimeSelector');
    endTimeSelector.addEventListener('click', function() {
      alert('打开结束时间选择器');
    });

    // 球馆选择
    const venueSelector = document.getElementById('venueSelector');
    venueSelector.addEventListener('click', function() {
      alert('跳转到：球馆选择页面');
    });

    // 场地选择
    const courtSelector = document.getElementById('courtSelector');
    courtSelector.addEventListener('click', function() {
      alert('打开场地选择器（需先选择球馆）');
    });

    // 确定按钮 - 跳转到订单结算页面
    const submitButton = document.getElementById('submitButton');
    submitButton.addEventListener('click', function() {
      // 获取表单数据
      const gameName = document.getElementById('gameName').value.trim();

      // 简单验证
      if (!gameName) {
        alert('请填写球局名称');
        return;
      }

      // 跳转到订单结算页面
      window.location.href = '订单结算页原型.html';
    });

    // 表单输入验证（实时检查）
    const requiredInputs = document.querySelectorAll('#gameName');
    requiredInputs.forEach(input => {
      input.addEventListener('input', function() {
        checkFormValidity();
      });
    });

    // 检查表单有效性
    function checkFormValidity() {
      const gameName = document.getElementById('gameName').value.trim();

      // 这里可以添加更复杂的验证逻辑
      if (gameName) {
        submitButton.disabled = false;
      } else {
        submitButton.disabled = true;
      }
    }

    // 初始化时检查
    checkFormValidity();
  </script>
</body>
</html>
